<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>订单列表</span>
      </div>
      <el-row>
        <el-col>
          <el-radio-group v-model="listType" @change="loadOrderData" size="small">
            <el-radio-button label="myOrder"><i class="el-icon-edit">我创建的</i></el-radio-button>
            <el-radio-button label="allOrder"><i class="el-icon-aim">全部订单</i></el-radio-button>
          </el-radio-group>
        </el-col>
      </el-row>
      <el-table size="size" :data="orderList" stripe border @row-click="handleRowClick">
        <el-table-column type="index" label="序号" width="70"></el-table-column>
        <el-table-column label="订单编号" prop="sn" width="150"></el-table-column>
        <el-table-column label="订单类别" prop="orderType" width="100px"></el-table-column>
        <el-table-column label="客户名称" prop="companyName" width="300px"></el-table-column>
        <el-table-column label="产品数量" prop="quantity" width="100px"></el-table-column>
        <el-table-column label="总金额" prop="amountMoney" width="100px"></el-table-column>
        <el-table-column label="状态" prop="status" width="100px"></el-table-column>
        <el-table-column label="开票" prop="invoice" width="100px"></el-table-column>
        <el-table-column label="收款" prop="payment" width="100px"></el-table-column>
        <el-table-column label="创建人" prop="createBy" width="100px"></el-table-column>
        <el-table-column label="创建时间" prop="createTime" width="150px"></el-table-column>
      </el-table>
    </el-card>
    <el-dialog
        title="订单详情"
        :visible.sync="dialogVisible"
        width="50%">
      <el-table :data="toolOrderItemApprovalVOS" stripe border>
        <el-table-column label="序号" width="50" type="index"></el-table-column>
        <el-table-column label="产品名称" width="150px" prop="name"></el-table-column>
        <el-table-column label="产品图纸" width="400px" prop="toolAttachments">
          <template slot-scope="scope">
            <el-link v-for="attachment in scope.row.toolAttachmentVOS" :key="attachment.id"
                     :href="attachment.filePath"
                     target="_blank">
              {{ attachment.filePath }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column label="图号" width="200px" prop="drawingNumber"></el-table-column>
        <el-table-column label="数量" width="90px" prop="number"></el-table-column>
        <el-table-column label="单价" width="90px" prop="unitPrice"></el-table-column>
        <el-table-column label="总价" width="90px" prop="amountMoney"></el-table-column>
        <el-table-column label="交货时间" width="100px" prop="requestDeliveryTime"></el-table-column>
        <el-table-column label="生产数量" width="90px" prop="productionQuantity"></el-table-column>
        <el-table-column label="外协数量" width="90px" prop="teamworkQuantity"></el-table-column>
        <el-table-column label="外协单位" prop="teamworkCompany"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "OrderList",
  data() {
    return {
      listType: 'myOrder',
      size: "mini",
      orderList: [{
        sn: '',
        createBy: '',
        createTime: '',
        orderType: '',
        companyName: '',
        quantity: '',
        amountMoney: '',
        status: '',
        payment: '',
        invoice: ''
      }],
      dialogVisible: false,
      toolOrderItemApprovalVOS: [{
        id: '',
        orderId: '',
        name: '',
        toolAttachmentVOS: [],
        number: '',
        unitPrice: '',
        amountMoney: '',
        drawingNumber: '',
        requestDeliveryTime: '',
        productionQuantity: '',
        teamworkCompany: '',
        teamworkQuantity: '',
      }]
    }
  },
  methods: {
    loadOrderData() {
      let apiUrl
      if (this.listType == 'myOrder') {
        apiUrl = "/tool/myOrderList/"
      } else if (this.listType == 'allOrder') {
        apiUrl = "/tool/allOrderList"
      }
      this.$http.get(apiUrl).then((response) => {
        if (response.data.code == 1) {
          this.orderList = response.data.data;
          console.log(this.taskArray)
        } else {
          console.log("获取订单数据失败")
        }
      })

    },
    handleRowClick(row) {
      console.log(row)
      this.$http.get(`/tool/orderDetails/${row.sn}`).then(response => {
        if (response.data.code == 1) {
          this.toolOrderItemApprovalVOS = response.data.data;
          this.dialogVisible = true;
        } else {
          console.error("Failed to load order details");
        }
      });
    }
  },
  mounted() {
    this.loadOrderData()
  }
}
</script>

<style scoped>
</style>